<template>
	<div class="list-box">
		<div class="pannel-title pannel-between">
			<div>邀请管理</div>
		</div>
		<div class="line"></div>
		<div class="create-code">
			<div class="create-code-left">
				<a-form class="code-form" ref="form1" :model="formState" :rules="rules" :labelCol="{ span: 9, offset: 0 }">
					<a-form-item label="使用有效期" name="dateRange">
						<a-range-picker :locale="locale" v-model:value="formState.dateRange" />
					</a-form-item>
					<a-form-item label="有效使用次数" name="limitCount">
						<a-input v-model:value="formState.limitCount" placeholder="请输入数字" suffix="次" />
					</a-form-item>
					<a-form-item :wrapper-col="{ span: 15, offset: 9 }">
						<a-button @click="createCode()">生成邀请链接</a-button>
					</a-form-item>
				</a-form>
			</div>
			<div class="create-code-right">
				<template v-if="dataSource.length>0">

				<h3>链接地址：</h3>
				<div class="invited_link">{{dataSource.length>0 && invitedLink+dataSource[0].code}}</div>
				<h3>邀请二维码：</h3>
				<div class="invited_code">
					<img :src="qrcodeDataUrl" style="width:120px;height:120px;" />
				</div>
				</template>
			</div>
		</div>
		<h3>申请记录</h3>
		<div class="data-table">
			<a-table :columns="columns" :row-key="(record) => record.id" :data-source="dataSource" :pagination="pagination" :loading="isLoading" @change="handleTableChange">
				<template #status="{ text }">
					<span class="span-green" v-if="text === 'Active'">使用中</span>
					<span class="span-red" v-if="text === 'Expired'">已失效</span>
				</template>
				<template #dateRange="{ record }">
					{{record.start_date+" ~ "+record.end_date}}
				</template>
				<template #invitedLink="{ record }">
					{{invitedLink+record.code}}
				</template>
				<template #action="{ record }">
					<a @click="editAdmin(record)" title="编辑" style="margin-right: 5px"><img src="@/assets/images/cz-edit.png" /></a>
					<a @click="deleteAdmin(record)" title="删除"><img src="@/assets/images/cz-delete.png" /></a>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script>
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Button, Form, Input, DatePicker } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import QRCode from "qrcode";
export default {
	components: {
		ATable: Table,
		AButton: Button,
		AForm: Form,
		AFormItem: Form.Item,
		AInput: Input,
		ARangePicker:DatePicker.RangePicker,
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "系统设置 / 管理员管理",
			isBack: false,
		});
		const formState = ref({
			limitCount: "",
			dateRange: "",
		});
		const dataSource = ref([]);
		const columns = reactive([
			{
				title: "有效期",
				dataIndex: "dateRange",
				key: "dateRange",
				slots: { customRender: "dateRange" },
			},
			{
				title: "有效使用次数",
				dataIndex: "limit_count",
				key: "limit_count",
			},
			{
				title: "已注册",
				dataIndex: "invited_count",
				key: "invited_count",
			},
			{
				title: "分享链接",
				dataIndex: "invited_link",
				key: "invited_link",
				slots: { customRender: "invitedLink" },
			},
			{
				title: "分享码",
				dataIndex: "code",
				key: "code",
				slots: { customRender: "code" },
			},
			{
				title: "状态",
				dataIndex: "status",
				key: "status",
				slots: { customRender: "status" },
			},
		]);
		const pagination = reactive({
			current: 1,
			pageSize: 10,
			total: 0,
		});
		const invitedLink = ref(process.env.VUE_APP_WEBURL+"register?c=");
		return {
			dataSource,
			columns,
			pagination,
			formState,
			isLoading: ref(false),
			visible: ref(false),
			locale,
			invitedLink
		};
	},
	data() {
		return {
			rules: {
				limitCount: [{
					required: true,
					message: "不能为空",
					trigger: "blur",
				},{
						trigger: "blur",
						message: "请输入大于0的整数",
						pattern: /^([1-9]\d*)$/,
					}],
				dateRange: [
					{
						required: true,
						message: "不能为空",
						trigger: "blur",
						type:"array"
					},
				],
			},
			qrcodeDataUrl:""
		};
	},
	mounted() {
		this.getList();
	},
	methods: {
		getList() {
			this.isLoading = true;
			httpRequest
				.post("获取邀请码列表", { pageSize: 20 })
				.then((res) => {
					this.dataSource = res.data.data;
					this.pagination.total = res.data.total;
					if(this.dataSource && this.dataSource.length>0){
						QRCode.toDataURL(this.invitedLink+this.dataSource[0].code)
						.then(url => {
							this.qrcodeDataUrl = url;
						})
						.catch(err => {
							console.error(err)
						})
					}
				})
				.finally(() => {
					this.isLoading = false;
				});
		},
		handleTableChange(page) {
			this.pagination.current = page.current;
			this.getList();
		},
		createCode() {
			this.$refs.form1.validate().then((value)=>{
				const data = {};
				data.limitCount = value.limitCount;
				console.log("date",value.dateRange);
				data.startDate = value.dateRange[0].format("YYYY-MM-DD");
				data.endDate = value.dateRange[1].format("YYYY-MM-DD");
				httpRequest
				.post("创建邀请码", data)
				.then(() => {
					message.success("邀请链接生成成功");
					this.getList();
				})
				.finally(() => {
					this.isLoading = false;
				});
			})
			
		},
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
.span-green {
	display: flex;
	align-items: center;
	&:before {
		content: "";
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 2px;
		margin-right: 5px;
		background: #14ce79;
	}
}
.span-red {
	display: flex;
	align-items: center;
	color:#999;
	&:before {
		content: "";
		display: block;
		width: 4px;
		height: 4px;
		border-radius: 2px;
		margin-right: 5px;
		background: #fe4e50;
	}
}
.create-code {
	margin: 50px 0 30px 0;
	display: flex;
	text-align: left;
	&-left {
		width: 50%;
		padding: 0 20px;
		.code-form{
			width: 100%;
			max-width: 440px;
			margin:0 auto;
		}
	}
	&-right {
		width: 50%;
		padding: 0 20px;
		border-left: 1px solid #eee;
	}
}
.list-box{
	text-align: left;
}
.invited_link{
	margin-top: 10px;
	margin-bottom: 20px;
	background: #eee;
	color: #333;
	height: 40px;
	line-height: 40px;
	padding:0 20px;
}
</style>
